{% extends "base.html" %}

{%block title%}Częstość losowania liczb względem liczby{%endblock%}

{%block head%}
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}/css/jquery.jqplot.min.css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="{{MEDIA_URL}}/js/jquery-ui.datepicker-pl.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#id_date").datepicker($.datepicker.regional['pl']);
        });
    </script>
       
    <script type="text/javascript" src="{{MEDIA_URL}}/js/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}/js/plugins/jqplot.barRenderer.min.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}/js/plugins/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            var d = [{%for v in value%}[{{v}},{{forloop.counter}}],{%endfor%}];
            var plot2 = $.jqplot('chart', [d], {
                seriesDefaults: {
                    renderer:$.jqplot.BarRenderer,
                    pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
                    shadow:false,
                    rendererOptions: { barDirection: 'horizontal' }
                },
                axes: {
                    yaxis: { renderer: $.jqplot.CategoryAxisRenderer },
                    xaxis: { pad: 1, tickInterval: 10 }
                }
            });
        });
    </script>
    <style>
    .jqplot-yaxis {
      width:20px !important;
    }
    </style>
{%endblock%}

{% block content %}
	<div id="content">
		<div class="post">
			<div class="title">
				<h2>Częstość losowania liczb względem liczby</h2>
			</div>
			<div class="entry">
			    <form method="POST" action="{%url dist-pair%}">
			    {% csrf_token %}
			        {{form.mode}} <span class="m-l">Od daty:</span> {{form.date}}
			        <span class="m-l">Dla liczby:</span> {{form.num}}
	                <input type="submit" id="pick" class="m-l" />
            	</form>
            	{%if form.num.value%}
                	<div id="chart" style="height:1200px; width:610px;"></div>
                {%endif%}
			</div>
		</div>
	</div>
{% endblock %}
